// Solarized theme for code-mirror: http://ethanschoonover.com/solarized
// Solarized color pallette: http://ethanschoonover.com/solarized/img/solarized-palette.png

@mixin solarized() {
  $yellow:  #b58900;
  $orange:  #cb4b16;
  $red:     #dc322f;
  $magenta: #d33682;
  $violet:  #6c71c4;
  $blue:    #268bd2;
  $cyan:    #2aa198;
  $green:   #859900;

  $base00: #657b83;
  $base01: #586e75;
  $base02: #073642;
  $base03: #002b36;

  $base0: #839496;
  $base1: #93a1a1;
  $base2: #eee8d5;
  $base3: #fdf6e3;

  .scastie {
    .cm-s-solarized {
      color-profile: sRGB;
      rendering-intent: auto;

      .cm-keyword { color: $yellow; }
      .cm-atom { color: $yellow; }
      .cm-number { color: $magenta; }
      .cm-def { color: $blue; }
      .cm-variable { color: $cyan; }
      .cm-variable-2 { color: $cyan; }
      .cm-variable-3 { color: $cyan; }
      .cm-property { color: $cyan; }
      .cm-operator {color: $yellow;}
      .cm-comment { color: $base01 }
      .cm-string { color: $green; }
      .cm-string-2 { color: $yellow; }
      .cm-meta { color: $green; }
      .cm-error, .cm-invalidchar {
        border-bottom: 1px dotted $red;
      }
      .cm-qualifier { color: $yellow; }
      .cm-builtin { color: $magenta; }
      .cm-bracket { color: $orange; }
      .CodeMirror-matchingbracket { 
        color: $green !important; 
        border-bottom-style: solid;
        border-bottom-width: 2px;
      }
      .CodeMirror-nonmatchingbracket {
        color: $red !important;
        border-bottom-style: solid;
        border-bottom-width: 2px;
      }
      .cm-tag { color: $base1; }
      .cm-attribute {  color: $cyan; }
      .cm-header { color: $base01; }
      .cm-quote { color: $base1; }
      .cm-hr {
        color: transparent;
        border-top: 1px solid $base01;
        display: block;
      }
      .cm-link { color: $base1; cursor: pointer; }
      .cm-special { color: $violet; }
      .cm-em {
        color: #999;
        text-decoration: underline;
        text-decoration-style: dotted;
      }
      .cm-strong { color: #eee; }
      .cm-tab:before { color: $base01; }

      .cm-matchhighlight {
        border-bottom-style: solid;
        border-bottom-width: 2px;
      }

      .CodeMirror-gutters {
        background-color: $base02;
        border-right-color: transparent;
      }

      a { color: $blue; }

      &.cm-s-dark {
        background-color:  $base03;
        color: $base0;

        .cm-matchhighlight {
          border-bottom-color: $base02;
        }

        .CodeMirror-gutter-filler {
          background-color: $base03;
        }

        .CodeMirror-selected, .cm-searching {
          background: rgba(255, 255, 255, 0.10);
        }

        .CodeMirror-activeline-background {
          background-color: $base02;
        }

        .CodeMirror-scrollbar-filler {
          background-color:  $base03;
        }
      }

      &.cm-s-light {
        background-color: $base3;
        color: $base00;

        .cm-matchhighlight {
          border-bottom-color: $base2;
        }

        .CodeMirror-gutter-filler {
          background-color: $base3;
        }

        .CodeMirror-selected, .cm-searching {
          background: rgba(0, 0, 0, 0.10);
        }

        .CodeMirror-activeline-background {
          background-color: $base2;
        }

        .CodeMirror-scrollbar-filler {
          background-color:  $base3;
        }
      }
    }
    .cm-s-solarized {
      &.CodeMirror {
        box-shadow: none;
      }

      &.cm-s-dark {
        .CodeMirror-widget .fold,
        .CodeMirror-linewidget .compilation-info,
        .CodeMirror-linewidget .runtime-error,
        .CodeMirror-linewidget .line,
        .CodeMirror-linewidget .inline {
          background-color: $base02;
        }

        .CodeMirror-dialog {
          background-color: $base02;
          color: $base01;
        }
      }

      &.cm-s-light {
        .CodeMirror-widget .fold,
        .CodeMirror-linewidget .compilation-info,
        .CodeMirror-linewidget .runtime-error,
        .CodeMirror-linewidget .line,
        .CodeMirror-linewidget .inline {
          background-color: $base2;
        }

        .CodeMirror-dialog {
          background-color: $base2;
          color: $base1;
        }
      }
    }
  }
}
